<template>
  <div class="header_top">
    <v-head />
    <!-- 面包屑导航 -->
    <template>
      <div class="bread">
        <div class="container">
          <span class="text fl"> 您的当前位置：</span>
          <el-breadcrumb class="fl" separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/hotlist' }">热门活动</el-breadcrumb-item>
            <el-breadcrumb-item>{{ info.title }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
    </template>

    <!-- 详情 -->
    <div class="show_team">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <div class="over">
              <img :src="''+ $api + info.image +''" class="w100 hei_a" alt="" />
            </div>
          </div>
          <div class="col-md-6 right">
            <div>
              <div class="name">
                {{ info.title }}
              </div>
              <div class="text">
                活动时间：{{ info.start_datetime_text}}<br />
                活动地址：{{ info.city }}{{ info.address }} <el-button type="text" @click="getMap"><i class="el-icon-location"></i>点击查看地图</el-button>
              </div>
              <ul class="clearfix huodong">

                <li class="clearfix"
              v-for="(neirong, d) in info.user"
              :key="d"
		>
                  <div class="fl">
                    <div
                      class="img"
                      :style="{
                    backgroundImage: 'url(' + $api + neirong.avatar + ')',
			}"
                    ></div>
                  </div>
                  <div class="fr">
                    <div>
                      <div>活动发起人</div>
                      <div>{{ neirong.nickname }}</div>
                    </div>
                  </div>
                </li>

              </ul>
              <div class="price clearfix">
                <div class="fl">活动费用
                  <span v-if="info.money == '0.00'">免费</span>
                  <span v-else>¥{{ info.money }}</span>
                </div>
                <div class="fr">
                  <i class="iconfont icon-yanjing"></i> {{ info.views }}
                  <!-- <a><i class="iconfont icon-fenxiang"></i></a> -->
                </div>
              </div>
              <div
                class="more ma ib shenqing"
                v-show="show"
                v-if="info.is_join == 1"
              >
                <a href="javascript:;">已参加</a>
              </div>
              <div
                class="more ma ib shenqing"
                @click="clickpar()"
                v-show="show"
                v-else
              >
                <a href="javascript:;">我要参加</a>
              </div>

              <div class="more ma shoucang shoucang1" v-if="info.is_collect == 1">
                <a href="javascript:;" @click="unCollect()"><i class="iconfont icon-kongwujiaoxing"></i>取消收藏（{{ info.collect_num }}）</a>
              </div>
              <div class="more ma shoucang shoucang1" v-else>
                <a href="javascript:;" @click="addCollect()"><i class="iconfont icon-kongwujiaoxing"></i>收藏（{{ info.collect_num }}）</a>
              </div>
            </div>
          </div>
        </div>
        <div class="join_active">
          <div class="ny_title">申请加入该组织，请填写您的基本信息</div>
          <el-form
      :model="ruleForm"
      :rules="ruleFormRules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm mt20"
    >
            <div class="row">
              <div class="col-md-3">
                <div class="text"><span>*</span>真实姓名</div>
                <div class="input">
                <input v-model="ruleForm.name" required ></input>
              </div>
              </div>
              <div class="col-md-3">
                <div class="text"><span>*</span>手机号</div>
                <div class="input"><input v-model="ruleForm.phone" prop="phone" required ></input></div>
              </div>
              <div class="col-md-3">
                <div class="text"><span>*</span>电子邮箱</div>
                <div class="input"><input v-model="ruleForm.email" prop="email" required ></input></div>
              </div>
              <div class="col-md-3">
                <div class="text"><span>*</span>性别</div>
                <div class="input clearfix">
                  <div class="radio fl">
                    <input id="man" name="sex" type="radio" v-model='ruleForm.sex' value="1" checked required />
                    <label for="man" class="radio-label">男</label>
                  </div>

                  <div class="radio fl">
                    <input id="woman" name="sex" type="radio" v-model='ruleForm.sex' value="2" required />
                    <label for="woman" class="radio-label">女</label>
                  </div>

                </div>
              </div>
              <div class="col-md-12">
                <div class="text"><span>*</span>所在城市</div>
                <div class="input">
                  <vCity ref="getConCity" :setCity="请选择"></vCity>
                  <!--el-col :span="12" class="address_col3 add_col3_show">
                    <el-form-item prop="city" class="font12">
                      <el-cascader
                        prop="city"
                        :options="options"
                        @change="handleChange"
                        class="full-width he4000"
                        size="large"
                        v-model="ruleForm.city"
                        placeholder="请选择您所在的城市"
                      />
                    </el-form-item>
                  </el-col-->
                  <!-- <el-col :span="18">
                    <el-form-item prop="address">
                      <el-input
                        v-model="ruleForm.address"
                        placeholder="请输入详细地址"
                      ></el-input>
                    </el-form-item>
                  </el-col> -->
                </div>
              </div>

              <div class="col-md-12 agree">
                <input type="checkbox" v-model="ruleForm.agree" prop="agree" value="1" required ></input>我已阅读并同意 <router-link to="/yhzcxy">《Jujuamici用户注册协议》</router-link>
              </div>
            </div>

		        <el-button @click="handleSubmit">提交</el-button>
            <button class="quxiao quxiao2" @click="unclickpar()">取消</button>
          </el-form>
        </div>
      </div>
    </div>
    <!-- 地图弹出开始 -->
    <el-dialog
  title="地图展示"
  :visible.sync="dialogVisible"
  width="40%" >
  <div>
    <!--img src="../../img/ditu.png" class="w100" alt=""-->
    <template>
      <div id="map"></div>
    </template>
  </div>

</el-dialog>
<!-- 地图弹出结束 -->
    <!-- 部分参加者 -->
    <div class="show_team_two">
      <div class="container">
        <div class="clearfix">
          <div class="ny_title" :class="n==1?'active':''" @click="n=1">部分参加者</div>  <div class="ny_title" :class="n==2?'active':''" @click="n=2">等待参与者</div>
        </div>
      <div class="sum">
         <div v-show="n==1">
            <div class="canyuzhe">
          <ul class="clearfix">
            <li class="ta"
              v-for="(neirong, d) in this.UserAll"
              :key="d"
      >
              <div class="img">
                <div
                  :style="{
                    backgroundImage: 'url(' + $api + neirong.avatar + ')',
                  }"
                ></div>
              </div>
              <div class="content">
                <div class="name">{{ neirong.nickname }}</div>
                <div class="job">{{ neirong.role_name }}</div>
              </div>
            </li>


          </ul>

            </div>
            <div class="ta mt40">
          <el-pagination
            layout="  prev, pager, next "
            :page-size="page_size"
            @current-change="current_change"
            :current-page.sync="currentPage"
            :pager-count="5"
            :total="UserPage.total"
            v-if="UserPage.last_page > 1"
          >
          </el-pagination>
          <el-empty description="暂无数据" v-if="UserPage.total == 0"></el-empty>
            </div>
         </div>
         <div v-show="n==2">
          <div class="canyuzhe">
          <ul class="clearfix">
            <li class="ta"
              v-for="(neirong, d) in this.UserAllTwo"
              :key="d"
      >
              <div class="img">
                <div
                  :style="{
                    backgroundImage: 'url(' + $api + neirong.avatar + ')',
                  }"
                ></div>
              </div>
              <div class="content">
                <div class="name">{{ neirong.nickname }}</div>
                <div class="job">{{ neirong.role_name }}</div>
              </div>
            </li>


          </ul>

            </div>
            <div class="ta mt40">
          <el-pagination
            layout="  prev, pager, next "
            :page-size="page_size"
            @current-change="current_changeTwo"
            :current-page.sync="currentPageTwo"
            :pager-count="5"
            :total="UserPageTwo.total"
            v-if="UserPageTwo.last_page > 1"
          >
          </el-pagination>
          <el-empty description="暂无数据" v-if="UserPageTwo.total == 0"></el-empty>
            </div>
         </div>
      </div>
      </div>
    </div>
    <!-- 活动内容 -->
    <div class="show_team_three">
      <div class="container">
        <div class="ny_title">活动内容</div>
        <div class="text" v-html="info.content">
        </div>

        <div class="ta">
          <div class="more shoucang ib shoucang1" v-if="info.is_collect == 1">
            <a href="javascript:;" @click="unCollect()"><i class="iconfont icon-kongwujiaoxing"></i>取消收藏（{{ info.collect_num }}）</a>
	  </div>

	  <div class="more shoucang ib shoucang1" v-else>
            <a href="javascript:;" @click="addCollect()"><i class="iconfont icon-kongwujiaoxing"></i>收藏（{{ info.collect_num }}）</a>
          </div>


          <div class="more fenxiang fenxiang1 ib pr">
            <a ><i class="iconfont icon-fenxiang"></i>分享到</a>
            <vshare :vshareConfig="vshareConfig"></vshare>
          </div>
        </div>
      </div>
    </div>
    <!-- 类似活动 -->
    <div class="about_story p7090" v-if="relativePage.count > 0">
      <div class="container">
        <div class="ny_title">类似活动</div>
          <swiper :options="swiperIndex" ref="mySwiper">
            <swiper-slide
              class="activity"
              v-for="(neirong, d) in this.relativeList"
              :key="d"
            >
              <div @click="goToLink">
                <router-link :to="{path:'/hotshow',query:{id:neirong.id} }"  class="bl over"
                  ><img :src="$api + neirong.image" class="w100" alt=""
                /></router-link>
                <div class="content">
                  <div class="data">
                    活动时间：{{ neirong.create_time | formatDate }}
                  </div>
                  <router-link :to="{path:'/hotshow',query:{id:neirong.id} }"  class="bl name line1"
                    >{{ neirong.title }}
                  </router-link>
                  <div class="address text">
                    <i class="iconfont icon-dizhi"></i>{{ neirong.city }}
                  </div>
                  <div class="people clearfix">
                    <div class="fl clearfix">
                      <div
                        class="tx_img"
                        :style="{
                          backgroundImage:
                            'url(' + $api + neirong.user.avatar + ')',
                        }"
                      ></div>
                      <div>{{ neirong.user.nickname }}</div>
                    </div>
                    <div class="fr">
                      <i class="iconfont icon-yanjing"></i> {{ neirong.views }}
                    </div>
                  </div>
                </div>
              </div>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
      </div>
    </div>
    <!-- 尾部 -->
    <v-foot />
  </div>
</template>

<script>
import vHead from "../../websitecom/Head.vue";
import vFoot from "../../websitecom/Foot.vue";
import vBread from "../../websitecom/Bread.vue";
import vCity from "../../components/City.vue";
import { formatDate } from "../../assets/data.js";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import { regionData, CodeToText, TextToCode } from "element-china-area-data";
import "ol/ol.css";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import BingMaps from "ol/source/BingMaps";
import { Map, View } from "ol";
export default {
  components: {
    vHead,
    vFoot,
    vBread,
    swiper,
    swiperSlide,
    vCity,
  },
  // 时间戳
  filters: {
    formatDate(time) {
      time = time * 1000;
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
  },

  data() {
    return {
      dialogVisible: false, //地图弹出
      swiperIndex: {
        slidesPerColumnFill: "row",
        slidesPerView: 4,
        spaceBetween: 26,
        slidesPerColumn: 2,
        observer: true,
        observeParents: true,
        breakpoints: {
          990: {
            slidesPerView: 3,
            spaceBetween: 20,
          },
          767: {
            slidesPerView: 1,
            spaceBetween: 15,
            slidesPerColumn: 1,
            pagination: {
              el: ".index_two .swiper-pagination",
              clickable: true,
            },
          },
        },
      },
      show: true,
      info: [],
      relativeList: [],
      relativePage: [],
      token: "",
      ruleForm: [],
      ruleFormRules: {
        name: [
          {
            type: "string",
            required: true,
            message: "真实姓名必填",
            trigger: "blur",
          },
          { min: 2, message: "长度最少2位" },
        ],
        phone: [
          {
            type: "string",
            required: true,
            message: "手机必填",
            trigger: "blur",
          },
          { min: 13, message: "长度最少13位" },
        ],
        email: [
          {
            type: "string",
            required: true,
            message: "邮箱必填",
            trigger: "blur",
          },
          { min: 10, message: "长度最少10位" },
        ],
      },
      options: regionData,
      selectedOptions: [],
      vshareConfig: {
        shareList: ["weixin", "fbook", "linkedin"],
        common: {
          //此处放置通用设置
        },
      },
      UserAll: [], //参与者数据
      UserPage: [], //参与者数据
      UserAllTwo: [], //参与者数据
      UserPageTwo: [], //参与者数据
      page_size: 10, //每页多少数据
      currentPage: 1, //默认当前页为第一页
      currentPageTwo: 1, //默认当前页为第一页
      map: null,
      n: 1,
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
  },
  methods: {
    goToLink() {
      this.$router.go(0);
    },
    handleChange(value) {
      //console.log(value);
      var provinceCode = CodeToText[value[0]];
      var cityCode = CodeToText[value[1]];
      var orgion = CodeToText[value[2]];
      ////console.log(provinceCode)
      ////console.log(cityCode)
      ////console.log(orgion)
      this.ruleForm.city = [value[0], value[1], value[2]];
      this.ruleForm.city_text = provinceCode + "/" + cityCode + "/" + orgion;
    },
    clickpar: function () {
      $(".join_active").slideDown();
      this.show = !this.show;
    },
    unclickpar: function () {
      $(".join_active").slideUp();
      this.show = !this.show;
      $(".shenqing").show();
    },
    getInfo() {
      var that = this;
      this.$axios
        .get(this.$api + "//api/activity/detail?id=" + this.$route.query.id)
        .then(function (response) {
          that.info = response.data.data;
          document.title = response.data.data.title + "-聚聚阿米奇";
          //console.log("info", that.info);
          //console.log("joiner", that.info.joiner);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    getList() {
      var that = this;
      this.$axios
        .get(this.$api + "//api/activity/relative?id=" + this.$route.query.id)
        .then(function (response) {
          that.relativeList = response.data.data.data;
          that.relativePage = response.data.data;
          //console.log(that.relativeList);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    //提交
    handleSubmit() {
      this.$nextTick(() => {
        this.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
            //console.log(this.ruleForm);
            if (!this.ruleForm.name) {
              this.$message.error("请输入姓名");
              return false;
            }

            if (this.ruleForm.phone.length != 11) {
              this.$message.error("手机长度不对");
              return false;
            }

            var reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
            if (!reg.test(this.ruleForm.phone)) {
              this.$message.error("请输入正确的手机号");
              return false;
            }

            if (!this.ruleForm.email) {
              this.$message.error("请输入邮箱");
              return false;
            }

            if (
              !/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(
                this.ruleForm.email
              )
            ) {
              this.$message.error("邮箱格式不正确");
              return;
            }

            if (!this.ruleForm.sex) {
              this.$message.error("请选择性别");
              return false;
            }

            console.log('城市', this.$refs["getConCity"].city);
            if (!this.$refs["getConCity"].city) {
              this.$message.error("请输入所在城市");
              return false;
            }

            if (!this.ruleForm.agree) {
              this.$message.error("用户注册协议必填");
              return false;
            }

            var url = this.$api + "/api/activity/registration";
            var jsons = {
              activity_id: this.$route.query.id,
              name: this.ruleForm.name,
              phone: this.ruleForm.phone,
              email: this.ruleForm.email,
              sex: this.ruleForm.sex,
              city: this.$refs["getConCity"].city,
              remark: "",
            };

            var that = this;
            this.$axios
              .post(url, jsons)
              .then((res) => {
                //console.log(res);
                if (res.data.code == 1) {
                  that.$message({
                    message: "提交成功，请等待审核",
                    type: "success",
                  });
                  location.reload();
                } else {
                  that.$message.error(res.data.msg);
                }
              })
              .catch((Error) => {
                ////console.log('error', Error);
                that.$message.error("请先登录！");
              });
          }
        });
      });
    },
    addCollect() {
      this.token = window.localStorage.getItem("token")
        ? window.localStorage.getItem("token")
        : "";
      if (!this.token) {
        this.$message.error("请先登录！");
        return false;
      }

      //定义一个json示例
      var jsons = {
        collect_id: this.$route.query.id,
        collect_type: "activity",
      };

      var that = this;

      this.$axios
        .post(this.$api + "/api/collect/collect", jsons)
        .then((res) => {
          //console.log(res.data);
          if (res.data.code == 1) {
            that.$message({
              message: res.data.msg,
              type: "success",
            });
            location.reload();
          } else {
            that.$message.error(res.data.msg);
          }
        })
        .catch((Error) => {
          //console.log(Error);
        });
    },
    unCollect() {
      this.token = window.localStorage.getItem("token")
        ? window.localStorage.getItem("token")
        : "";
      if (!this.token) {
        this.$message.error("请先登录！");
        return false;
      }

      //定义一个json示例
      var jsons = {
        collect_id: this.$route.query.id,
        collect_type: "activity",
      };

      var that = this;

      this.$axios
        .post(this.$api + "/api/collect/delete", jsons)
        .then((res) => {
          //console.log(res.data);
          if (res.data.code == 1) {
            that.$message({
              message: res.data.msg,
              type: "success",
            });
            location.reload();
          } else {
            that.$message.error(res.data.msg);
          }
        })
        .catch((Error) => {
          //console.log(Error);
        });
    },
    // 地图弹出
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    getUserInfo() {
      var that = this;
      this.$axios
        .get(this.$api + "//api/user/userinfo")
        .then(function (response) {
          var user = response.data.data;
          //console.log("infoNum1111", user);
          that.ruleForm.name = user.name;
          that.ruleForm.phone = user.mobile;
          that.ruleForm.email = user.email;
          //that.ruleForm.sex = user.sex;

          //城市分开
          var tcity = user.city;
          that.ruleForm.city_text = user.city;
          var tcity = tcity.split("/");
          var code1 = TextToCode[tcity[0]].code;
          var code2 = TextToCode[tcity[0]][tcity[1]].code;
          var code3 = TextToCode[tcity[0]][tcity[1]][tcity[2]].code;
          that.ruleForm.city = [code1, code2, code3];
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    getActivityUserAll() {
      var that = this;
      this.$axios
        .get(
          this.$api +
            "//api/activity/activityuserall?activity_id=" +
            this.$route.query.id +
            "&page_no=" +
            this.currentPage +
            "&page_size=" +
            this.page_size
        )
        .then(function (response) {
          that.UserAll = response.data.data.data;
          that.UserPage = response.data.data;
          //console.log("UserAll", that.UserAll);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    getActivityUserAllTwo() {
      var that = this;
      this.$axios
        .get(
          this.$api +
            "//api/activity/activityuserall?is_go=0&activity_id=" +
            this.$route.query.id +
            "&page_no=" +
            this.currentPageTwo +
            "&page_size=" +
            this.page_size
        )
        .then(function (response) {
          that.UserAllTwo = response.data.data.data;
          that.UserPageTwo = response.data.data;
          //console.log("UserAll", that.UserAll);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    current_change(currentPage) {
      //改变当前页
      this.currentPage = currentPage;
      this.getActivityUserAll();
    },
    current_changeTwo(currentPage) {
      //改变当前页
      this.currentPageTwo = currentPage;
      this.getActivityUserAllTwo();
    },
    // 初始化地图
    initMap() {
      if (!this.info.mapcode) {
        this.$message({
          message: "地址解析有误",
          type: "error",
        });
        return false;
      }

      if (
        this.info.mapcode.status != "OK" ||
        this.info.mapcode.result.length == 0
      ) {
        //console.log(123);
        this.$message({
          message: "地址解析有误",
          type: "error",
        });
        return false;
      }
      var lat = this.info.mapcode.result.location.lat;
      var lng = this.info.mapcode.result.location.lng;
      console.log("lat", lat);
      console.log("lng", lng);

      var map = new BMap.Map("map"); // 创建地图实例
      var point = new BMap.Point(parseFloat(lng), parseFloat(lat)); // 创建点坐标
      map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

      // 添加图片
      var myIcon = new BMap.Icon("../static/dian.svg", new BMap.Size(50, 50));

      // 创建标记
      var marker = new BMap.Marker(point, { icon: myIcon });

      // 在地图上添加点标记
      map.addOverlay(marker);

      //添加缩略图控件
      map.addControl(
        new BMap.OverviewMapControl({
          isOpen: false,
          anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
        })
      );
      //添加缩放平移控件
      map.addControl(new BMap.NavigationControl());
      //添加比例尺控件
      map.addControl(new BMap.ScaleControl());
      //添加地图类型控件
      map.addControl(new BMap.MapTypeControl());
    },
    //点击地图弹窗
    getMap() {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.initMap();
      });
    },
  },
  beforeCreate: function () {
    document.getElementsByTagName("body")[0].className = "active";
    document.getElementsByTagName("html")[0].className = "active";
  },

  mounted() {
    //设置滚动条指定
    document.documentElement.scrollTop = 0;
    this.getInfo();
    this.getList();
    this.getUserInfo();
    this.getActivityUserAll();
    this.getActivityUserAllTwo();
  },
};
</script>
<style>
#map {
  width: 100%;
  height: 500px;
}
.add_col3_show .el-input__inner {
  width: 100%;
  height: 3.25rem;
  line-height: 3.125rem;
  border-radius: 0.3125rem;
  padding: 0 1.25rem;
  border: solid 1px #dfdfdf;
}
</style>
<style lang="less" scoped >
.he4000 {
}
.join_active button {
  padding: 0;
  font-size: 1rem;
}
.fenxiang.fenxiang1 .bdsharebuttonbox {
  display: none;
  position: absolute;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.fenxiang.fenxiang1:hover .bdsharebuttonbox {
  display: inline-block;
  text-align: center;
  width: 60%;
}
html.active {
  overflow-y: scroll !important;
  height: auto !important;
}
.hei_a {
  height: 25.9375rem;
  object-fit: cover;
}
.show_team .right .huodong li .fl .img {
  border-radius: 50% !important;
}
.show_team {
  padding: 3.75rem 0;
  background-color: #f7f8fa;
}

.show_team {
  .right {
    .name {
      font-size: 1.125rem;
      line-height: 3.125rem;
      color: #000000;
    }

    .text {
      margin: 1.25rem 0;
    }

    .huodong {
      border-top: 1px solid #dfdfdf;
      padding: 1.375rem 0 1.5rem;

      li {
        padding: 0.6875rem 0.8125rem;
        background-color: #eceff4;
        margin-right: 0.75rem;
        display: inline-block;

        .fl {
          .img {
            width: 3.125rem;
            height: 3.125rem;
            border-radius: 3px;
            background-size: cover !important;
            background-repeat: no-repeat !important;
          }

          margin-right: 0.6875rem;
        }

        .fr {
          height: 3.125rem;
          display: table-cell;

          > div {
            display: table-cell;
            vertical-align: middle;
            height: 3.125rem;

            > div:nth-child(1) {
              font-size: 0.875rem;
              line-height: 1.5rem;
              color: #848484;
            }

            > div:nth-child(2) {
              font-size: 1rem;
              line-height: 1.875rem;
              color: #000000;
            }
          }
        }
      }
    }

    .price {
      font-size: 1rem;
      line-height: 1.875rem;
      color: #000000;
      margin-bottom: 1.5rem;

      span {
        color: #4c8bf5;
        font-size: 1.25rem;
        display: inline-block;
        margin-left: 0.625rem;
      }

      .fr {
        color: #848484;

        a {
          i {
            font-size: 1.125rem;
            margin-left: 1.25rem;
          }
        }
      }
    }
  }
}
.join_active {
  padding-top: 2.8125rem;
  display: none;

  .ny_title::before {
    width: 4rem;
  }

  input {
    width: 100%;
    height: 3.25rem;
    line-height: 3.125rem;
    border-radius: 0.3125rem;
    padding: 0 1.25rem;
    border: solid 1px #dfdfdf;
  }

  .text {
    font-size: 1rem;
    line-height: 1.875rem;
    color: #848484;

    span {
      color: #de5044;
    }
  }

  textarea {
    width: 100%;
    height: 7.1875rem;
    border-radius: 0.3125rem;
    line-height: 1.875rem;
    padding: 0.625rem 1.25rem;
    border: solid 1px #dfdfdf;
  }

  .row > div {
    margin-bottom: 0.9375rem;
  }

  .agree {
    font-size: 1rem;
    line-height: 1.875rem;
    color: #848484;
    margin: 0 0 1.5rem !important;

    input {
      display: inline-block;
      width: 24px;
      height: 24px;
      position: relative;
      top: 0.375rem;
      margin: 0 0.625rem 0 0;
    }

    a {
      color: #4c8bf5;
    }
  }

  button {
    width: 10.1875rem;
    height: 3.25rem;
    background-color: #4c8bf5;
    border-radius: 1.875rem;
    text-align: center;
    line-height: 3.25rem;
    margin-right: 1.5625rem;
    border: none;
    color: #fff;
  }

  button.quxiao {
    background-color: #c4c4c4;
  }
  .quxiao2:hover {
    background: #909399 !important;
    border-color: #909399 !important;
  }
  button:hover {
    background: #de5044;
  }
}
.shenqing.more,
.canyu.more {
  margin-right: 1.25rem;
}
.shoucang {
  display: inline-block;
  background-color: #de5044;
  border-color: #de5044;

  i {
    font-size: 1rem;
    color: #fff;
    margin-right: 0.4375rem;
  }

  a {
    color: #fff;
  }
}
.shoucang.shoucang1 {
  display: inline-block;
  background-color: #de5044 !important;
  border-color: #de5044 !important;

  i {
    font-size: 1rem;
    color: #fff;
    margin-right: 0.4375rem;
  }

  a {
    color: #fff !important;
  }
}
.shoucang.shoucang1:hover {
  background-color: #fff !important;

  a,
  i {
    color: #de5044 !important;
  }
}
.shoucang:hover {
  background-color: #fff;

  a,
  i {
    color: #de5044;
  }
}
.join_active,
.zgfangshi {
  .radio {
    margin: 0.5rem;
  }

  .radio input[type="radio"] {
    position: absolute;
    opacity: 0;
  }

  .radio input[type="radio"] + .radio-label:before {
    content: "";
    background: #f4f4f4;
    border-radius: 100%;
    border: 1px solid #dfdfdf;
    display: inline-block;
    width: 1.4em;
    height: 1.4em;
    position: relative;
    top: 0;
    margin-right: 1em;
    vertical-align: top;
    cursor: pointer;
    text-align: center;
    -webkit-transition: all 250ms ease;
    transition: all 250ms ease;
  }

  .radio input[type="radio"]:checked + .radio-label:before {
    background-color: #4c8bf5;
    box-shadow: inset 0 0 0 4px #f4f4f4;
  }

  .radio input[type="radio"]:focus + .radio-label:before {
    outline: none;
    border-color: #4c8bf5;
  }

  .radio input[type="radio"]:disabled + .radio-label:before {
    box-shadow: inset 0 0 0 4px #f4f4f4;
    border-color: #dfdfdf;
    background: #dfdfdf;
  }

  .radio input[type="radio"] + .radio-label:empty:before {
    margin-right: 0;
  }
}
.show_team_two {
  padding: 3.125rem 0 3.75rem;
}
.canyuzhe {
  ul {
    margin: 0 -0.9375rem 0;
  }

  ul li {
    width: 20%;
    float: left;
    padding: 0 0.9375rem;
    margin-bottom: 2.125rem;
    position: relative;

    .img {
      div {
        width: 6.75rem;
        height: 6.8125rem;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 50%;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        transform: translateX(-50%);
      }
    }

    .content {
      box-shadow: 0px 0.3125rem 0.625rem 0px rgba(0, 0, 0, 0.1);
      border-radius: 0.625rem;
      border: solid 1px #dedede;
      padding: 4.375rem 0 1.5625rem;
      margin-top: 3.4375rem;
      overflow: hidden;
    }

    .name {
      font-size: 1.125rem;
      line-height: 1.875rem;
      padding-bottom: 0.25rem;
      position: relative;
      color: #000000;
    }

    .name::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      background-color: #de5044;
      width: 1.375rem;
      height: 1px;
    }

    .job {
      font-size: 1rem;
      line-height: 1.875rem;
      color: #848484;
    }
  }

  ul li:hover {
    .content {
      box-shadow: 0px 0.3125rem 0.625rem 0px rgba(222, 81, 68, 0.2);
    }
  }
}
.all {
  a {
    color: #848484;
  }
}
.all a:hover {
  color: #de5044;
}
.show_team_three {
  padding: 4.375rem 0;
  background-color: #f7f8fa;

  .text {
    margin: 0 0 2.5rem;
  }

  .shoucang {
    margin: 0 2.1875rem 0 0;
  }
}
.el-dialog__body {
  padding-top: 15px !important;
}
.el-dialog__title,
.el-dialog__headerbtn .el-dialog__close {
  font-size: 20px !important;
  font-weight: 600 !important;
}

.el-cascader {
  width: 100%;
}
.address_col3 {
  padding-right: 22px;
}
.el-col-18 {
  padding-left: 7px;
}
</style>
<style scoped>
.join_active .el-form-item__content {
  margin-left: 0 !important;
}
.show_team .right .name {
  display: block;
}
.show_team_two .ny_title {
  margin-right: 1.25rem;
  cursor: pointer;
}
.show_team_two .ny_title::before {
  background: transparent;
}
.show_team_two .ny_title.active::before {
  background: #de5044;
}
@media (max-width: 1366px) {
  .show_team .right .name {
    font-size: 16px;
    line-height: 22px;
  }
}
@media (max-width: 990px) {
  .show_team .right {
    margin-top: 15px;
  }
  .canyuzhe ul li {
    width: 33.3%;
  }
}
@media (max-width: 767px) {
  .show_team {
    padding: 15px 0 25px;
  }
  .canyuzhe ul li {
    width: 50%;
    margin-bottom: 15px;
  }
  .show_team_two {
    padding: 25px 0 0;
  }
  .show_team_three {
    padding: 25px 0;
  }
}
</style>
